import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld.vue'
// import First from '@/components/Views/First.vue'
// import Comments from '@/components/comments/CommentsMain.vue'
// import Todos from '@/components/todos/TodosMain.vue'
// import Axios from '@/components/axios/AxiosMain.vue'
// import Users from '@/components/users/UserMain.vue'
// import ChildrenRouter from '@/components/childrenRouter/ChildrenRouterMain.vue'
// import About from '@/components/childrenRouter/About.vue'
// import Home from '../components/childrenRouter/Home.vue'
// import Message from '../components/childrenRouter/Message.vue'
// import News from '../components/childrenRouter/News.vue'
// import MessageDetail from '../components/childrenRouter/MessageDetail.vue'
Vue.use(Router)
// vue 组件按需引用，vue-router懒加载，vue打包优化
const HelloWorld = r => require.ensure([], () => r(require('../components/HelloWorld.vue')), 'HelloWorld')
const First = r => require.ensure([], () => r(require('../components/Views/First.vue')), 'First')
const Comments = r => require.ensure([], () => r(require('../components/comments/CommentsMain.vue')), 'Comments')
const Todos = r => require.ensure([], () => r(require('../components/todos/TodosMain.vue')), 'Todos')
const Axios = r => require.ensure([], () => r(require('../components/axios/AxiosMain.vue')), 'Axios')
const Users = r => require.ensure([], () => r(require('../components/users/UserMain.vue')), 'Users')
const ChildrenRouter = r => require.ensure([], () => r(require('../components/childrenRouter/ChildrenRouterMain.vue')), 'ChildrenRouter')
const About = r => require.ensure([], () => r(require('../components/childrenRouter/About.vue')), 'About')
const Home = r => require.ensure([], () => r(require('../components/childrenRouter/Home.vue')), 'Home')
const Message = r => require.ensure([], () => r(require('../components/childrenRouter/Message.vue')), 'Message')
const News = r => require.ensure([], () => r(require('../components/childrenRouter/News.vue')), 'News')
const MessageDetail = r => require.ensure([], () => r(require('../components/childrenRouter/MessageDetail.vue')), 'MessageDetail')
const Cloudmusic = r => require.ensure([], () => r(require('../components/music/Cloudmusic.vue')), 'Cloudmusic')

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      component: First
    },
    {
      path: '/index.html',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',
      name: 'First',
      component: First
    },
    {
      path: '/comments',
      name: 'Comments',
      component: Comments
    },
    {
      path: '/todos',
      name: 'Todos',
      component: Todos
    },
    {
      path: '/axios',
      name: 'Axios',
      component: Axios
    },
    {
      path: '/users',
      name: 'Users',
      component: Users
    },
    {
      path: '/music',
      name: 'Cloudmusic',
      component: Cloudmusic
    },
    {
      path: '/childrenRouter',
      component: ChildrenRouter,
      children: [
        {
          path: 'about',
          name: 'About',
          component: About
        },
        {
          path: 'home',
          component: Home,
          children: [
            {
              path: 'message',
              name: 'Message',
              component: Message,
              children: [
                {
                  path: 'detail/:id',
                  component: MessageDetail
                }
              ]
            },
            {
              path: 'news',
              name: 'News',
              component: News
            },
            {
              path: '',
              redirect: 'news'
            }
          ]
        },
        {
          path: '',
          redirect: 'about'
        }
      ]
    }
  ]
})
